<template>
    <el-container>
      <el-main>
    <el-row>
      <el-col :span="4" v-for="(item, index) in books" :key="index">
        <el-card :body-style="{ padding: '0px' }"
                 style="margin-right: 20px; margin-bottom: 20px;">
          <div @click="readingBook(index)">
            <img  :src="item.coverUrl" class="image">
          </div>
          <div style="padding: 14px;">
            <div class="bottom clearfix">
              <el-row :gutter="20">
                <el-col :span="15"><span style="font-size: 12px;">{{ item.name }}</span></el-col>
                <el-col :span="9"><el-button type="primary" size="mini" @click.native="toFrum(item.id)">讨论区</el-button></el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination
      style="position:fixed; bottom: 22px;left: 35vw"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageableRequestDTO.page"
      :page-sizes="[12]"
      :page-size="pageableRequestDTO.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="booksCount">
    </el-pagination>
      </el-main>
    </el-container>
</template>

<script>
import {getRequest, postRequest} from '../../tools/api'
import Epub from 'epubjs'

export default {
  name: 'BookCity',
  data () {
    return {
      books: [],
      booksCount: 1,
      pageableRequestDTO: {
        page: 1,
        pageSize: 12
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    handleSizeChange (val) {
      this.pageableRequestDTO.pageSize = val
      this.init()
    },
    init () {
      postRequest('/literaturedetail/queryList', this.pageableRequestDTO).then(res => {
        console.log('res:', res)
        if (res.code === 200) {
          this.books = res.data
          for (let i = 0; i < this.books.length; i++) {
            const book = new Epub(this.books[i].url) // 生成Book对象
            book.loaded.cover.then(cover => {
              book.archive.createUrl(cover).then(url => {
                this.books[i].coverUrl = url
                this.$forceUpdate()
              })
            })
            if (this.books[i].name.length > 10) {
              this.books[i].name = this.books[i].name.slice(0, 10) + '...'
            }
          }
        }
      })
      getRequest('/literaturedetail/allCount').then(res => {
        console.log('allCountres:', res.data)
        if (res.code === 200) {
          this.booksCount = res.data
        }
      })
    },
    toFrum (bookid) {
      console.log('book:id ', bookid)
      this.$router.push({
        path: '/ThemeForum',
        query: {
          id: bookid
        }
      })
    },
    readingBook (index) {
      // query是使用path来跳转的,params根据name来跳转的
      const URL = this.books[index].url
      const BOOKID = this.books[index].id
      this.$router.push({
        path: '/EBook',
        query: {bookUrl: URL, bookId: BOOKID}
      })
    },
    handleCurrentChange (val) {
      this.pageableRequestDTO.page = val
      this.init()
    }
  }
}
</script>

<style scoped>
.image {
  width: 100%;
  height: 200px;
  display: block;
}
.pageStyle{
  position: fixed;
  left: 14vw;
  bottom: 5vh;
}
</style>
